<!--
 * @Author: Neko
 * @Date: 2021-05-21 16:56:41
 * @LastEditTime: 2021-05-28 10:21:31
 * @LastEditors: Neko
-->
<template>
  <contents>
    <u-navbar
			:title="$t('locales.applyAgentResult')"
			:title-width="570"
			:border-bottom="false"
			:background="{ background: '#0049AC' }"
      title-color="#e6e6e6"
      back-icon-color="#e6e6e6"
			:is-back="true"
		/>

    <view class="message__container">
      <view class="message__content">
        <view
          class="title"
          :class="'status-' + businessData.auditStatus"
        >
          {{ infoMap[businessData.auditStatus] }}
        </view>

        <view v-if="businessData.auditStatus === 1" class="message">
          {{ $t('locales.congratulation') }}{{ $t('locales.appliedResult5') }} <text class="company">{{ businessData.storeName }}</text> {{ $t('locales.sAgent') }}
        </view>

        <view v-if="businessData.auditStatus === -1" class="message">
          {{ $t('locales.regret') }}{{ $t('locales.appliedResult1') }} <text class="company">{{ businessData.storeName }}</text> {{ $t('locales.appliedResult3') }}
        </view>

        <view v-if="businessData.auditStatus === -2" class="message">
          {{ $t('locales.regret') }}<text class="company">{{ businessData.storeName }}</text> {{ $t('locales.appliedResult4') }}
        </view>

        <view v-if="businessData.auditStatus === -1" class="reason">
          <view class="reason__title">{{ $t('locales.declineReasonList') }}</view>

          <view class="reason__list">
            <view class="item">{{ businessData.auditOpinion }}</view>
          </view>
        </view>
      </view>

      <view class="message__form">
        <view v-if="businessData.auditStatus !== 1 && businessData.auditStatus !== -2" class="title">{{ $t('locales.resubmitForm') }}</view>
        <BusinessForm :type="2" :business-info="businessData" @confirm="onConfirmBusinessForm" />
      </view>
    </view>
  </contents>
</template>

<script>
import { getMessageDetailAction } from '@/api/http/user'
import BusinessForm from '@/components/businessForm'

export default {
  components: {
    BusinessForm
  },

  data() {
    const _this = this

    return {
      routerParams: {},

      storeData: {},

      businessData: {},

      infoMap: {
        '1': _this.$t('locales.approvalStatus1'),
        '-1': _this.$t('locales.approvalStatus2'),
        '-2': _this.$t('locales.approvalStatus3')
      }
    }
  },

  computed: {
    id() {
      return this.routerParams.id
    },

    newsId() {
      return this.routerParams.newsId
    }
  },

  onLoad(routerParams) {
    this.routerParams = routerParams

    this.getMessageDetailAction()
  },

  methods: {
    async getMessageDetailAction() {
      try {
        const res = await getMessageDetailAction({
          id: this.id,
          newsId: this.newsId
        })

        if (res.code === 200) {
          this.businessData = res.data
        } else {
          return uni.showToast({
            title: res.message,
            icon: 'none'
          })
        }
      } catch (e) {
        throw Error(e)
      }
    },

    onCompleteConfirm(res) {
      this.businessData = res
    },

    onConfirmBusinessForm() {
      uni.showToast({
        title: this.$t('locales.operationSuccess'),
        icon: 'none'
      })
      uni.navigateBack()
    }
  }
}
</script>

<style lang="scss" scoped>
.message__container {
  .message__content {
    padding: 65rpx 23rpx;
    margin-bottom: 20rpx;
    background: #fff;

    .title {
      margin-bottom: 32rpx;
      font-size: 36rpx;
      font-weight: bolder;

      &.status--1 {
        color: #ff6464;
      }

      &.status-1 {
        color: #54BF83;
      }

      &.status--2 {
        color: #F9A02C;
      }
    }

    .message {
      // margin-bottom: 46rpx;
      font-size: 28rpx;
      line-height: 44rpx;
      font-weight: 500;
      color: #666;

      .company {
        color: #333;
      }
    }

    .reason {
      margin: 46rpx 0 0;
      
      .reason__title {
        margin-bottom: 29rpx;
        font-size: 28rpx;
        font-weight: bolder;
        color: #333;
      }

      .reason__list {
        font-size: 26rpx;
        font-weight: 500;
        line-height: 44rpx;
        color: #666666;

        .item {
          white-space: pre-line;
        }
      }
    }
  }

  .message__form {
    padding: 20rpx 25rpx;
    background: #fff;

    .title {
      font-size: 32rpx;
      font-weight: bolder;
      line-height: 48rpx;
    }
  }
}
</style>